<template>
  <Loading :loading="loading">
    <div>
      <NavBar></NavBar>
      <div class="banner" :style="{ height: bodyHeight + 'px' }"></div>
      <div class="c-effui6">
        <van-form ref="form" @submit="onSubmit">
          <div class="form">
            <div class="flex-row margin-bottom">
              <div class="label">姓名:</div>
              <div>
                <van-field
                  v-model="username"
                  name="username"
                  class="field"
                  :rules="[{ required: true, message: '请输入姓名' }]"
                />
              </div>
            </div>
            <div class="flex-row margin-bottom">
              <div class="label">联系方式:</div>
              <div>
                <van-field
                  v-model="mobile"
                  name="mobile"
                  class="field"
                  maxlength="11"
                  :rules="[
                    { required: true, message: '请输入联系方式' },
                    {
                      pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                      message: '请输入正确的手机号'
                    }
                  ]"
                />
              </div>
            </div>
            <div class="flex-row margin-bottom">
              <div class="label">所在地区:</div>
              <div>
                <van-field
                  :value="area"
                  name="area"
                  class="field"
                  right-icon="arrow-down"
                  readonly
                  @click="$refs.joinAera.visible = true"
                  :rules="[{ required: true, message: '请输入所在地区' }]"
                >
                  <template #input>
                    <JoinAera ref="joinAera" @confirm="onConfirm" />
                  </template>
                </van-field>
              </div>
            </div>
            <!-- 学历字段 -->
            <div class="flex-row">
              <div class="label">学历:</div>
              <div>
                <van-field
                  :value="degree"
                  name="degree"
                  class="field"
                  right-icon="arrow-down"
                  readonly
                  @click="$refs.joinDegree.visible = true"
                  :rules="[{ required: true, message: '请选择学历' }]"
                >
                  <template #input>
                    <JoinDegree
                      ref="joinDegree"
                      @confirm="onConfirmDegree"
                      :defaultValue="degree"
                      placeholder=""
                      title="学历类型"
                      :columns="columns"
                    />
                  </template>
                </van-field>
              </div>
            </div>
          </div>
          <van-button class="button" type="primary" native-type="submit">
            下一步
          </van-button>
        </van-form>
      </div>
    </div>
  </Loading>
</template>
<script>
import JoinAera from './components/joinAera'
import JoinDegree from './components/joinDegree'
import NavBar from '@/components/h5header'
import API from '@/services/h5/common'
import Loading from '@/components/data-loading'
export default {
  components: { JoinAera, JoinDegree, Loading, NavBar },
  data() {
    return {
      bodyHeight: '',
      username: '',
      mobile: '',
      area: '',
      degree: '',
      columns: [],
      loading: false
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.bodyHeight = document.documentElement.clientHeight - 38
  },
  methods: {
    async init() {
      if (this.$route.query.answer === 'true') {
        this.$dialog
          .confirm({
            className: 'dialong-success',
            title: '提交成功',
            message: '您的请求我们已经收到\n稍后会有专人与您联系',
            showCancelButton: false,
            confirmButtonColor: '@c-color-primary'
          })
          .then(() => {
            this.$router.push('./my')
          })
          .catch(() => {})
        return false
      } else {
        this.loading = true
        let res = await API.getDictList({ codeType: 'degree' })
        if (res.data && res.data.code === 1000) {
          this.columns = []
          res.data.data.map(item => {
            this.columns.push({
              label: item.codeName,
              value: item.code
            })
          })
          this.loading = false
        }
      }
    },

    onClickLeft() {
      this.$router.go(-1)
    },
    onSubmit(values) {
      this.$refs.form
        .validate()
        .then(() => {
          this.$router.push({
            path: '/joinAnswer',
            query: {
              ...values
            }
          })
        })
        .catch(() => {})
    },
    onConfirm(val) {
      this.area = val
    },
    onConfirmDegree(val) {
      this.degree = val
    }
  }
}
</script>
<style scoped lang="less">
.banner {
  height: calc(100vh - 38px);
  width: 375px;
  position: absolute;
  background-image: url('./img/joinUs.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}
// .banner img {
//   width: 100%;
//   height: 100%;
// }
.c-effui6 {
  position: absolute;
  top: 296px;
  width: 360px;
  left: 15px;
}
.form {
  width: 305px;
  padding: 20px;
  background-color: #fff;
  border-radius: 13px;
}
.label {
  flex: 1;
  line-height: 35px;
  text-align: right;
  font-size: 13px;
  color: #333;
  font-weight: bold;
  margin-right: 10px;
}
/deep/.field {
  padding: 0;
  .van-field__body {
    background-color: #f6f6f6;
    width: 235px;
    padding: 6px 15px;
    box-sizing: border-box;
    border-radius: 4px;
  }
}
.margin-bottom {
  margin-bottom: 13px;
}
.button {
  width: 345px;
  height: 50px;
  border-radius: 25px;
  background-color: #fff;
  opacity: 0.83;
  color: @c-color-primary;
  font-weight: bold;
  font-size: 17px;
  margin-top: 15px;
}
</style>
